<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>

	<link rel="stylesheet" type="text/css" href="css/header-menu.css" />
	<script type="text/javascript">
		var allSubMenusToHide = ['sub-links-PM', 'sub-links-CRM', 'sub-links-HRM', 'sub-links-SUPPLIERS', 
									'sub-links-CMS', 'sub-links-FAM', 'sub-links-OTHERS'];
		
		function activateSubMenu(id)
		{
			deactivateAllSubMenus();
			document.getElementById(id).style.visibility = "visible";
		}
		
		function deactivateSubMenu(id)
		{
			document.getElementById(id).style.visibility = "hidden";
		}
		
		function deactivateAllSubMenus()
		{
			for(i = 0; i < allSubMenusToHide.length; i++)
			{
				subMenuId = allSubMenusToHide[i];
				//alert(subMenuId);
				deactivateSubMenu(subMenuId);
			}
		}
	</script>
</head>
<body>
	<table class="tblHeaderMenu">
		<tr>
			<td class="tblHeaderMenu left"></td>
			<td class="tblHeaderMenu center">
				<table cellspacing="0" cellpadding="0"><tr>
					<td style="vertical-align:top;">
						<img src="images-interface/logo.gif" align="top" height="90" alt="" border="0"/></td>
					<td class="tblHeaderMenu greeting">
						<span>Hello <b>Buzz <!-- TODO: Load username here! --></b></span>
						<br/>
						<span>Logout | Tutorials | What news?</span>
					</td>
					<td width="700px" class="tblHeaderMenu navigator">
						<div id="sup-links">
							<a href="index.jsp"><span>HOME</span></a>
							<a href="projectList.jsp" title="Project Management"><span style="width:20px;" onmouseover="activateSubMenu('sub-links-PM');">PM</span></a>
							<a href=""><span style="width:35px;" onmouseover="activateSubMenu('sub-links-CRM');">CRM</span></a>
							<a href=""><span style="width:35px;" onmouseover="activateSubMenu('sub-links-HRM');">HRM</span></a>
							<a href=""><span style="width:90px;" onmouseover="activateSubMenu('sub-links-SUPPLIERS');">SUPPLIERS</span></a>
							<a href=""><span style="width:35px;" onmouseover="activateSubMenu('sub-links-CMS');">CMS</span></a>
							<a href=""><span style="width:35px;" onmouseover="activateSubMenu('sub-links-FAM');">FAM</span></a>
							<a href=""><span style="width:60px;" onmouseover="activateSubMenu('sub-links-OTHERS');">OTHERS</span></a>						
						</div>
						<div id="sub-links">
							<div id="sub-links-PM">
								<a href="projectNew.jsp"><span>New Project</span></a>
								<a href="phaseList.jsp"><span>Phase</span></a>
								<a href="quotationList.jsp"><span>Quotation</span></a>
								<a href="agendaList.jsp"><span>Agenda</span></a>
								<a href="checklistList.jsp"><span>Checklist</span></a>
							</div>
							<div id="sub-links-CRM"></div>
							<div id="sub-links-HRM"></div>
							<div id="sub-links-SUPPLIERS"></div>
							<div id="sub-links-CMS"></div>
							<div id="sub-links-FAM"></div>
							<div id="sub-links-OTHERS">
								<a href="companyList.jsp"><span>Company List</span></a>
								<a href="employeeList.jsp"><span>Employee List</span></a>
								<a href="venueList.jsp"><span>Venue List</span></a>
								<a href="unitList.jsp"><span>Unit List</span></a>
<!-- 							<a href=""><span>Help</span></a> -->
							</div>
						</div>
					</td>
				</tr></table>
			</td>
			<td class="tblHeaderMenu right"></td>
		</tr>
	</table>
</body>
</html>